<template >
<div class="initiatingprocess">

  <div class="routers-ctrl">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/initiatingprocess' }">发起流程</el-breadcrumb-item>
    </el-breadcrumb>

    <ul class="progress">
      <li v-if="isFlowShow.flow_s1">
        <ul class="progress-line clearfix">
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/businessform?tab=1">1 业务提单</router-link></span></li>
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/businessform?tab=1">业务审核单</router-link></span></li>
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/businessform?tab=2">外贸合同</router-link></span></li>
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/businessform?tab=3">PI</router-link></span></li>
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/businessform?tab=4">内贸合同</router-link></span></li>
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/businessform?tab=100">业务测算表</router-link></span></li>
        </ul>
      </li>

      <li v-if="isFlowShow.flow_s2">
        <ul class="progress-line clearfix">
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/buyertotcf">2 买家付定金给TCF</router-link></span></li>
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/buyertotcf">定金收汇通知单(附件)</router-link></span></li>
        </ul>
      </li>

      <li v-if="isFlowShow.flow_s3">
        <ul class="progress-line clearfix">
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/tcftofactory">3 TCF付定金给工厂</router-link></span></li>
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/tcftofactory">定金付款申请单</router-link></span></li>
        </ul>
      </li>

      <li v-if="isFlowShow.flow_s4">
        <ul class="progress-line  clearfix">
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/tcflefttofactory?tab=1">4 TCF付尾款给工厂</router-link></span></li>
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/tcflefttofactory?tab=1">质量确认函</router-link></span></li>
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/tcflefttofactory?tab=2">尾款付款申请单</router-link></span></li>
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/tcflefttofactory?tab=2#flow_04_upload">尾款付款通知书(附件)</router-link></span></li>
        </ul>
      </li>

      <li v-if="isFlowShow.flow_s5">
        <ul class="progress-line clearfix">
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/documentprocess?tab=1&subTab=1">5-8 发货和报关</router-link></span></li>
          <ul class="progress-line-special">
            <li class="clearfix" >
            <span  @click="changeRouter" class="spec-span"><router-link to="/initiatingprocess/documentprocess?tab=1&subTab=1">工厂发货:</router-link></span>
            <span @click="changeRouter"><router-link to="/initiatingprocess/documentprocess?tab=1&subTab=1">发货通知单</router-link></span>
            <span @click="changeRouter"><router-link to="/initiatingprocess/documentprocess?tab=1&subTab=2">出厂确认（附件)</router-link></span>
            </li>


            <template v-if="showAll">
            <li class="clearfix" >
            <span class="spec-span" @click="changeRouter"><router-link to="/initiatingprocess/documentprocess?tab=2&subTab=1">单证员报关:</router-link></span>
            <span @click="changeRouter"><router-link to="/initiatingprocess/documentprocess?tab=2&subTab=1">货运委托书</router-link></span>
            <span @click="changeRouter"><router-link to="/initiatingprocess/documentprocess?tab=2&subTab=2">报关发票</router-link></span>
            <span @click="changeRouter"><router-link to="/initiatingprocess/documentprocess?tab=2&subTab=3">报关箱单 </router-link></span>
            <span @click="changeRouter"><router-link to="/initiatingprocess/documentprocess?tab=2&subTab=4">报关合同 </router-link></span>
            <span @click="changeRouter"><router-link to="/initiatingprocess/documentprocess?tab=2&subTab=5">报关单</router-link></span>
            <span @click="changeRouter"><router-link to="/initiatingprocess/documentprocess?tab=2&subTab=6">申报要素</router-link></span>
            <span @click="changeRouter"><router-link to="/initiatingprocess/documentprocess?tab=2&subTab=4#flow_05_upload">报关委托书（附件）</router-link></span>
           </li>
            <li class="clearfix">
              <span class="spec-span" @click="changeRouter"><router-link to="/initiatingprocess/documentprocess?tab=3">向工厂索要发票:</router-link></span>
              <span @click="changeRouter"><router-link to="/initiatingprocess/documentprocess?tab=3">增值税开票信息</router-link></span>
            </li>
            <li class="clearfix">
              <span class="spec-span" @click="changeRouter"><router-link to="/initiatingprocess/documentprocess?tab=4">核销资料收集:</router-link></span>
              <span @click="changeRouter"><router-link to="/initiatingprocess/documentprocess?tab=4">核销资料(附件)</router-link></span>
            </li>
            </template>
            <template v-else>
              <li class="clearfix" >
                <span class="spec-span" @click="changeRouter(1)"><router-link to="/initiatingprocess">单证员报关:</router-link></span>
                <span @click="changeRouter(1)"><router-link to="/initiatingprocess">货运委托书</router-link></span>
                <span @click="changeRouter(1)"><router-link to="/initiatingprocess">报关发票</router-link></span>
                <span @click="changeRouter(1)"><router-link to="/initiatingprocess">报关箱单 </router-link></span>
                <span @click="changeRouter(1)"><router-link to="/initiatingprocess">报关合同 </router-link></span>
                <span @click="changeRouter(1)"><router-link to="/initiatingprocess">报关单</router-link></span>
                <span @click="changeRouter(1)"><router-link to="/initiatingprocess">申报要素</router-link></span>
                <span @click="changeRouter(1)"><router-link to="/initiatingprocess">报关委托书（附件）</router-link></span>
             </li>
              <li class="clearfix">
                <span class="spec-span" @click="changeRouter(1)"><router-link to="/initiatingprocess">向工厂索要发票:</router-link></span>
                <span @click="changeRouter(1)"><router-link to="/initiatingprocess">增值税开票信息</router-link></span>
              </li>
              <li class="clearfix">
                <span class="spec-span" @click="changeRouter(1)"><router-link to="/initiatingprocess">核销资料收集:</router-link></span>
                <span @click="changeRouter(1)"><router-link to="/initiatingprocess">核销资料(附件)</router-link></span>
              </li>
            </template>


          </ul>
        </ul>
      </li>

      <li v-if="isFlowShow.flow_s6">
        <ul class="progress-line  clearfix">
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/buyerlefttotcf">9 买家付尾款给TCF</router-link></span></li>
          <li><span @click="changeRouter"><router-link to="/initiatingprocess/buyerlefttotcf">尾款收汇通知单(附件)</router-link></span></li>
        </ul>
      </li>

    </ul>
  </div>

  <router-view></router-view>

</div>
</template>

<script>

import {getStore, setStore, removeStore} from '@/assets/js/common.js';
import {getPermission} from '@/server/initiatingprocess';

export default {
  created(){ 
    //每次重置  store, 确保是一次新的流程
    this.$store.commit("businessform/RESET_INITIAL_DATA");
    this.$store.commit("buyertotcf/RESET_INITIAL_DATA");
    this.$store.commit("tcftofactory/RESET_INITIAL_DATA");
    this.$store.commit("tcflefttofactory/RESET_INITIAL_DATA");
    this.$store.commit("documentprocess/RESET_INITIAL_DATA");
    this.$store.commit("buyerlefttotcf/RESET_INITIAL_DATA");

  },
  mounted(){

    let tabsPer = Array(4).fill(true);

    let tabs = ["documentprocess_fd", "documentprocess_cc", "documentprocess_askInvoice", "documentprocess_collectionData"]

    getPermission({flowId: 5, currNodeId: ''}).then((response) => {

      let tabsPerData = response.data.datas[0];

      tabs.forEach((tabname,index) => {
        let temp = tabsPerData.find(e => e.itemName == tabname)
        if (temp.permission == 'H'){
          tabsPer[index] = false;
        } else {
          tabsPer[index]= true;
        }
      });

      if (!tabsPer[1]){
        this.showAll = false;
      }
    });

  },
  beforeRouteUpdate(to, from , next){
    if (to.path === '/initiatingprocess'){
      document.querySelector('.initiatingprocess  .routers-ctrl').style.zIndex = '0';
    }
    next();
  },
  data() {
    return {
      showInitial: true,
      isFlowShow: {
        flow_s1: true,
        flow_s2: true,
        flow_s3: true,
        flow_s4: true,
        flow_s5: true,
        flow_s6: true
      },
      showAll: false
    }
  },
  components: {
  },
  methods: {
    changeRouter(type){
      if (type == 1){
      } else {
        document.querySelector('.initiatingprocess  .routers-ctrl').style.zIndex = '-1';
      }
    }
  }
}
</script>

<style  lang="scss">
@import "../../assets/css/common.scss";

.initiatingprocess {
  // padding: 20px;
  position: relative;
  user-select: none;

  .el-icon-arrow-right:last-child{
    color: #b4bccc;
  }

  .routers-ctrl {
    position: absolute;
    top: 20px;
    left: 20px;

    a {
      color: #000;
    }

    .progress {
      font-family: 'Arial Negreta', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 18px;

      > li {
        padding: 18px 5px;
        border-bottom: 1px dashed #ccc;

        span {
          padding: 0px 5px;
        }
      }

      .spec-span {
        a {
          color: #333 !important;
          font-weight: 600;
        }
      }

      .progress-line {

        > li:nth-child(1) {
          width: 160px;
          font-size: 14px;
          a{
            color: #333 !important;
            font-weight: 600;
          }
        }
        > li {
          float: left;
          padding: 0 10px 0 0;
          font-size: 14px;
          transition: all .6s;
          a{
            transition: all .6s;
          }
          &:hover{
            color: #409EFF;
            a{
              color: #409EFF;
            }
          }
        }
        .progress-line-special {
          padding-top: 30px;
          > li {
            padding: 10px 0;
            font-size: 14px;
            a{
              transition: all .6s;
              &:hover{
                color: #409EFF;
              }
            }
          }
          > li:nth-child(1) {
            padding: 0px 0px 10px 0px;
          }
        }
      }

      @media screen and (max-width: 1344px) {

        .progress-line {

          .progress-line-special {
            > li {
              padding: 10px 0 !important;
            }
          }
        }
      }
    }
  }
}
</style>
